<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <box title="拼搏到感动自己">
            <!-- <template #login>
                <span>登录</span>
            </template> -->
            <span>返回</span>
            <span>进入</span>
        </box>
    </div>
</body>
<script>

    const { h } = Vue

    const app = Vue.createApp({
        setup (props, context) {
            return {}
        },
    })

    app.component('box', {
        // template: `<div>
        //         你好世界
        //         <slot name='login'></slot>
        //     </div>`,
        setup (props, context) {
            console.log(context);


            // h 函数是用来创建虚拟 DOM 用的
            // 参数一： 标签名称
            // 参数二： 标签属性
            // 参数三： 标签的内容
            return () => h('h1',
                { class: 'a b c', style: 'color: #f66', name: context.attrs.title },
                [
                    '区区一个考试，怕什么，它就考什么',
                    // context.slots.login(),  // 使用具名插槽
                    // context.slots.default() // default 是用来获取没有添加名称的插槽标签
                ])
        }
    })

    app.mount('#app')
</script>

</html>